import { defineComponent, onMounted, ref, reactive, watch, computed } from "vue";
import styles from "./saler.module.scss";
// import IconFont from '@nutui/icons-vue';
// import '@nutui/icons-vue/dist/style_iconfont.css';
import { $getSalerInfo,$addSaler } from "@/apis/api";
import {Toast} from "@nutui/nutui";
// import to from "await-to-js";
import NeedLogin from "@/components/NeedLogin/NeedLogin";
import useLogin from "@/hooks/useLogin";

export default defineComponent({
  setup() {
    const login = useLogin();
    const state = reactive({
      loading: false,
      is_saler: true,
      info: {
        id: '',
        qrcode_url: '',
      }
    })
    const saler_form = ref({
      realname: '',
      phone: '',
      work_userid: '',
    })
    onMounted(() => {
      if (login.has_open_id.value) {
        getInfo();
      }
    })
    watch(() => login.has_open_id.value, (nv) => {
      if (nv) {
        getInfo();
      }
    })
    const getInfo = () => {
      if (!login.has_open_id.value) {
        return;
      }
      state.loading = true;
      const open_id = login.userStore.user_info.open_id;
      $getSalerInfo({
        wx_openid: open_id,
      }).then((res: any) => {
        state.is_saler = res.data.is_saler || false;
        if (state.is_saler) {
          state.info.id = res.data.info.id;
          state.info.qrcode_url = res.data.info.qrcode_url;
        }
      }).finally(() => {
        state.loading = false;
      })
    }

    onMounted(() => {
      const url = `${process.env.VUE_APP_URL}?number={number}#/questionnaire`;
      console.log("123",url);
      login.getOpenId({ redirect: true });
    })
    const salerSubmit = () => {
      // const id = login.getUrlCode().id;
      const id = "5411736938745580";
      const wx_openid = login.userStore.user_info.open_id;
      // const url = `${process.env.VUE_APP_URL}?number={number}#/insure`;
      const work_userid = saler_form.value.work_userid;
      const realname = saler_form.value.realname;
      const phone = saler_form.value.phone;
      let params = {
        id,
        wx_openid,
        work_userid,
        realname,
        phone,
      }
      if (!params.id) {
        Toast.fail("未找到渠道!")
        return;
      }
      if (!params.wx_openid) {
        Toast.fail("您未授权微信登录!")
        return;
      }
      if (!params.work_userid) {
        Toast.fail("请填写员工号!")
        return;
      }
      if (!params.realname) {
        Toast.fail("请填写姓名!")
        return;
      }
      if (!params.phone) {
        Toast.fail("请填写手机号!")
        return;
      }
      if (params.phone.length !== 11) {
        Toast.fail("手机号格式不正确!")
        return;
      }
      $addSaler(params).then((res: any) => {
        Toast.success("提交成功!");
        getInfo();
      })
    }
    return () => (
      <div class={styles.saler}>
        <div class={styles['poster-box']}>
          <img class={styles.poster} src={require("@/assets/images/poster.png")} />
          {
            state.info?.qrcode_url && <img class={styles.qrcode} src={state.info.qrcode_url} />
          }
        </div>
        {
          state.loading && <div class={styles['loading-box']}>
            {/* <IconFont name="loading" color="white" size="0.8rem" /> */}
            <span class={styles['loading-tips']}>业务员信息加载中...</span>
          </div>
        }
        {
          !state.is_saler && <div class={styles['signCard-box']}>
            <div class={styles['signCard']}>
              <div class={styles['card-header']}>业务员登记</div>
              <div class={styles['card-container']}>
                <div class={styles['signRow']}>
                  <span class={styles['signRow-label']}>姓名</span>
                  <input v-model={saler_form.value.realname} placeholder="请输入姓名" />
                </div>
                <div class={styles['signRow']}>
                  <span class={styles['signRow-label']}>电话</span>
                  <input v-model={saler_form.value.phone} placeholder="请输入电话" />
                </div>
                <div class={styles['signRow']}>
                  <span class={styles['signRow-label']}>员工号</span>
                  <input v-model={saler_form.value.work_userid} placeholder="请输入员工号" />
                </div>
                <div class={styles['submit-btn']} onClick={() => { salerSubmit() }}>提交</div>
              </div>
            </div>
          </div>
        }
        <NeedLogin />
      </div>
    )
  }
})